<template>

  <section>
    <!-- 面包屑 -->
      <breadcrumbs></breadcrumbs>
    <el-row>
      <el-col :span="18">
        <h1>奖惩设置</h1>
        <el-form ref="form"
                 :model="form"
                 :rules="rules"
                 label-width="80px">
          <el-form-item label="奖励收益"
                        prop="back_stop_reward" >
            <el-row>
              <el-col :span="8">
                <el-input v-model="form.back_stop_reward"
                          placeholder="这里设置回收站充电宝的奖励金额" :disabled="!xiugai"></el-input>
              </el-col>
              <el-col :span="2">
                <span class="marlt10px">元/个</span>
              </el-col>
              <el-col :span="6">
                <span class="colorblue">(回收站奖励)</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="推荐收益"
                        prop="reward_money">
            <el-row>
              <el-col :span="8">
                <el-input v-model="form.reward_money"
                          placeholder="这里设置用户推荐其他用户注册并成功回收后，推荐用户获取的推荐收益" :disabled="!xiugai"></el-input>
              </el-col>
              <el-col :span="2">
                <span class="marlt10px">元/个</span>
              </el-col>
              <el-col :span="6">
                <span class="colorblue">(用户推荐收益)</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="惩罚金额"
                        prop="back_stop_punish">
            <el-row>
              <el-col :span="8">
                <el-input v-model="form.back_stop_punish"
                          placeholder="这里设置回收站发往仓库充电宝的次品扣款金额" :disabled="!xiugai"></el-input>
              </el-col>
              <el-col :span="2">
                <span class="marlt10px">元/个</span>
              </el-col>
              <el-col :span="6">
                <span class="colorblue">(回收站次品扣款金额)</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!xiugai" type="primary"
                       @click="xiugaishuju">修改</el-button>
            <el-button type="primary" v-if="xiugai"
                       @click="onSubmit('form')">确定</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import breadcrumbs from "@/components/breadcrumbs.vue";

export default {

  name: "houseDetail",
  components: {

    breadcrumbs,
  },
  data () {
    return {
      xiugai:false,
      form: {},
      rewardData: {},
      moneyData: {},
      punishData: {},
      messageId: "",
      reward_is: false,
      money_is: false,
      punish_is: false,
      detailData: {},
      rules: {
        "btnIcon": [],
        "back_stop_reward": [{
          required: true,
          message: '请输入奖励收益',
          trigger: 'blur'
        }],
        "reward_money": [{
          required: true,
          message: '请输入推荐收益',
          trigger: 'blur'
        }],
        "back_stop_punish": [{
          required: true,
          message: '请输入惩罚金额',
          trigger: 'blur'
        }],
      },
    }
  },
  created () {
    this.getsetList();
  },
  methods: {
    xiugaishuju(){
      console.log("909099")
      this.xiugai = true;
      this.getsetList();

    },
    setByKey (key, data, form) {
      this.$api.system.update({
        configKey: key,
        configValue: parseInt(data) * 100,
        ds: form.ds
      }).then(res => {
        if (res.code == 200) {
          let messageTitle = '';
          if (key == "back_stop_reward") {
            messageTitle = '奖励收益';
          } else if (key == "reward_money") {
            messageTitle = '推荐收益';
          } else if (key == "back_stop_punish") {
            messageTitle = '惩罚金额';
          }
          // this.$message.success(res.msg);
          this.getsetList();
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.setByKey("back_stop_reward", this.form.back_stop_reward, this.rewardData);
          this.setByKey("back_ok_recommend_reward_money", this.form.reward_money, this.moneyData);
          this.setByKey("back_stop_punish", this.form.back_stop_punish, this.punishData);
          this.xiugai = false;
    
          // if (this.reward_is && this.money_is && this.punish_is) {
            this.$message({
              type: "success",
              message: "设置成功"
            })
          }
        })
     
    },
    getsetList () {
      this.$api.system.getValueByKey({
        key: "back_stop_reward"
      }).then(res => {
        if (res.code == 200) {
          this.rewardData = res.data;
          // this.form.configValue = parseInt(this.rewardData.configValue) / 100;
          this.form = {
            back_stop_reward: parseInt(this.rewardData.configValue) / 100,
            reward_money: parseInt(this.moneyData.configValue) / 100,
            back_stop_punish: parseInt(this.punishData.configValue) / 100
          }
        }
      })
      this.$api.system.getValueByKey({
        key: "back_ok_recommend_reward_money"
      }).then(res => {
        if (res.code == 200) {
          this.moneyData = res.data;
          this.form = {
            back_stop_reward: parseInt(this.rewardData.configValue) / 100,
            reward_money: parseInt(this.moneyData.configValue) / 100,
            back_stop_punish: parseInt(this.punishData.configValue) / 100
          }
        }
      })
      this.$api.system.getValueByKey({
        key: "back_stop_punish"
      }).then(res => {
        if (res.code == 200) {
          this.punishData = res.data;
          this.form = {
            back_stop_reward: parseInt(this.rewardData.configValue) / 100,
            reward_money: parseInt(this.moneyData.configValue) / 100,
            back_stop_punish: parseInt(this.punishData.configValue) / 100
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.marlt10px {
  margin-left: 10px;
}
.colorblue {
  color: blue;
}
.message-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>